<script type="text/javascript">
    RED.nodes.registerType('hollicube', {
        category: 'output', //节点分类
        color: '#a6bbcf', //节点背景颜色
        defaults: {
            name: { value: "" },
            pubtype: { value: 2, required: true },
            domain: { required: true },
            namespace: { required: true },
            qos: { value: "" },
            retain: { value: "" },
            broker: { type: "hollicube-broker", required: true }
        },
        inputs: 1, //节点输入 0 or 1
        outputs: 0, //节点输出 0 or more
        icon: "bridge.png", // 节点使用图标
        align: "right",
        label: function () { //节点标签
            return this.name || "Hollicube"
        }
    });
</script>

<script type="text/x-red" data-template-name="hollicube">
    <div class="form-row">
        <label for="node-input-broker"><i class="fa fa-globe"></i> <span data-i18n="hollicube.label.broker"></span></label>
        <input type="text" id="node-input-broker">
    </div>
    <div class="form-row">
        <label for="node-input-domain"><i class="fa fa-tasks"></i> <span data-i18n="hollicube.label.domain"></span></label>
        <input type="text" id="node-input-domain" data-i18n="[placeholder]hollicube.label.domain">
    </div>
    <div class="form-row">
        <label for="node-input-namespace"><i class="fa fa-tasks"></i> <span data-i18n="hollicube.label.namespace"></span></label>
        <input type="text" id="node-input-namespace" data-i18n="[placeholder]hollicube.label.namespace">
    </div>
    <div class="form-row">
        <label for="node-input-pubtype"><i class="fa fa-tasks"></i> <span data-i18n="hollicube.label.pubtype"></span></label>
        <select id="node-input-pubtype">
            <option value="1" data-i18n="hollicube.pubModel"></option>
            <option value="2" data-i18n="hollicube.pubTS"></option>
			<option value="3" data-i18n="hollicube.pubSnapshot"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-qos"><i class="fa fa-empire"></i> <span data-i18n="hollicube.label.qos"></span></label>
        <select id="node-input-qos" style="width:125px !important">
            <option value=""></option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        &nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="hollicube.retain"></span> &nbsp;<select id="node-input-retain" style="width:125px !important">
            <option value=""></option>
            <option value="false" data-i18n="hollicube.false"></option>
            <option value="true" data-i18n="hollicube.true"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="icon-tag"></i> <span data-i18n="hollicube.label.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]hollicube.label.name">
    </div>
</script>

<script type="text/x-red" data-help-name="hollicube">
    <p>A node to publish mode and serial data to HolliCube.</p>
</script>

<script type="text/x-red" data-template-name="hollicube-broker">
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i> <span data-i18n="hollicube.label.name"></span></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]hollicube.label.name">
    </div>
    <div class="form-row">
        <ul style="background: #fff; min-width: 600px; margin-bottom: 20px;" id="node-config-mqtt-broker-tabs"></ul>
    </div>
    <div id="node-config-mqtt-broker-tabs-content" style="min-height: 170px;">
        <div id="mqtt-broker-tab-connection" style="display:none">
            <div class="form-row node-input-broker">
                <label for="node-config-input-broker"><i class="fa fa-globe"></i> <span data-i18n="hollicube.label.broker"></span></label>
                <input class="input-append-left" type="text" id="node-config-input-broker" style="width:40%;" data-i18n="[placeholder]hollicube.label.example">
                <label for="node-config-input-port" style="margin-left:20px; width:43px; "> <span data-i18n="hollicube.label.port"></span></label>
                <input type="text" id="node-config-input-port" data-i18n="[placeholder]hollicube.label.port" style="width:55px">
            </div>
            <div class="form-row">
                <input type="checkbox" id="node-config-input-usetls" style="display: inline-block; width: auto; vertical-align: top;">
                <label for="node-config-input-usetls" style="width: auto" data-i18n="hollicube.label.use-tls"></label>
                <div id="node-config-row-tls" class="hide">
                    <label style="width: auto; margin-left: 20px; margin-right: 10px;" for="node-config-input-tls"><span data-i18n="hollicube.label.tls-config"></span></label><input style="width: 300px;" type="text" id="node-config-input-tls">
                </div>
            </div>
            <div class="form-row">
                <label for="node-config-input-clientid"><i class="fa fa-tag"></i> <span data-i18n="hollicube.label.clientid"></span></label>
                <input type="text" id="node-config-input-clientid" data-i18n="[placeholder]hollicube.placeholder.clientid">
            </div>
            <div class="form-row">
                <label for="node-config-input-keepalive" style="width: auto"><i class="fa fa-clock-o"></i> <span data-i18n="hollicube.label.keepalive"></span></label>
                <input type="text" id="node-config-input-keepalive" style="width: 50px">
                <input type="checkbox" id="node-config-input-cleansession" style="margin-left: 30px; height: 1em;display: inline-block; width: auto; vertical-align: middle;">
                <label for="node-config-input-cleansession" style="width: auto;" data-i18n="hollicube.label.cleansession"></label>
            </div>
            <div class="form-row">
                <input type="checkbox" id="node-config-input-compatmode" style="display: inline-block; width: auto; vertical-align: top;">
                <label for="node-config-input-compatmode" style="width: auto;" data-i18n="hollicube.label.compatmode"></label>
            </div>
            <div class="form-row">
                <label for="node-config-input-compactinterval" style="width: auto"><i class="fa fa-clock-o"></i> <span data-i18n="hollicube.label.compactinterval"></span></label>
                <input type="text" id="node-config-input-compactinterval" style="width: 50px">
            </div>
        </div>
        <div id="mqtt-broker-tab-security" style="display:none">
            <div class="form-row">
                <label for="node-config-input-user"><i class="fa fa-user"></i> <span data-i18n="hollicube.label.username"></span></label>
                <input type="text" id="node-config-input-user">
            </div>
            <div class="form-row">
                <label for="node-config-input-password"><i class="fa fa-lock"></i> <span data-i18n="hollicube.label.password"></span></label>
                <input type="password" id="node-config-input-password">
            </div>
        </div>
        <div id="mqtt-broker-tab-birth" style="display:none">
            <div class="form-row">
                <label for="node-config-input-birthTopic"><i class="fa fa-tasks"></i> <span data-i18n="hollicube.label.topic"></span></label>
                <input type="text" id="node-config-input-birthTopic" data-i18n="[placeholder]hollicube.placeholder.birth-topic">
            </div>
            <div class="form-row">
                <label for="node-config-input-birthQos"><i class="fa fa-empire"></i> <span data-i18n="hollicube.label.qos"></span></label>
                <select id="node-config-input-birthQos" style="width:125px !important">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
                &nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="hollicube.retain"></span> &nbsp;<select id="node-config-input-birthRetain" style="width:125px !important">
                    <option value="false" data-i18n="hollicube.false"></option>
                    <option value="true" data-i18n="hollicube.true"></option>
                </select>
            </div>
            <div class="form-row">
                <label for="node-config-input-birthPayload"><i class="fa fa-envelope"></i> <span data-i18n="hollicube.label.payload"></span></label>
                <input type="text" id="node-config-input-birthPayload" data-i18n="[placeholder]hollicube.label.payload">
            </div>
        </div>
        <div id="mqtt-broker-tab-will" style="display:none">
            <div class="form-row">
                <label for="node-config-input-willTopic"><i class="fa fa-tasks"></i> <span data-i18n="hollicube.label.topic"></span></label>
                <input type="text" id="node-config-input-willTopic" data-i18n="[placeholder]hollicube.placeholder.will-topic">
            </div>
            <div class="form-row">
                <label for="node-config-input-willQos"><i class="fa fa-empire"></i> <span data-i18n="hollicube.label.qos"></span></label>
                <select id="node-config-input-willQos" style="width:125px !important">
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                </select>
                &nbsp;&nbsp;<i class="fa fa-history"></i>&nbsp;<span data-i18n="hollicube.retain"></span> &nbsp;<select id="node-config-input-willRetain" style="width:125px !important">
                    <option value="false" data-i18n="hollicube.false"></option>
                    <option value="true" data-i18n="hollicube.true"></option>
                </select>
            </div>
            <div class="form-row">
                <label for="node-config-input-willPayload"><i class="fa fa-envelope"></i> <span data-i18n="hollicube.label.payload"></span></label>
                <input type="text" id="node-config-input-willPayload" data-i18n="[placeholder]hollicube.label.payload">
            </div>
        </div>
    </div>
</script>

<script type="text/x-red" data-help-name="hollicube-broker">
    <p>A minimum MQTT broker connection requires only a broker server address to be added to the default configuration.</p>
    <p>To secure the connection with SSL/TLS, a TLS Configuration must also be configured and selected.</p>
    <p>If you create a Client ID it must be unique to the broker you are connecting to.</p>
    <p>Unlike the built in MQTT node, this broker connection will persist messages when connectivity is lost,
    and between Node-RED restarts to reduce data loss.</p>
    <p>To enable persistent storage for input and output messages, click on the appropriate check boxes.<p>
    <p>Change the <em>compaction interval time</em> to compact the internal database and remove deleted messages.<p>
    <p>Database files for a connection are stored in the Node-RED directory under the <em>hollicube</em> directory.  These
    can be safely removed after stopping Node-RED to clear unsent messages.  The database
    used is <a target="_blank" href="https://github.com/louischatriot/nedb">NeDB.</a>
    <p>For more information about MQTT see the <a href="http://www.eclipse.org/paho/" target="_blank">Eclipse Paho</a> site.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('hollicube-broker', {
        category: 'config',
        defaults: {
            name: { value: "" },
            broker: { value: "", required: true },
            port: { value: 1883, required: true, validate: RED.validators.number() },
            tls: { type: "tls-config", required: false },
            clientid: {
                value: "", validate: function (v) {
                    if ($("#node-config-input-clientid").length) {
                        // Currently editing the node
                        return $("#node-config-input-cleansession").is(":checked") || (v || "").length > 0;
                    } else {
                        return (this.cleansession === undefined || this.cleansession) || (v || "").length > 0;
                    }
                }
            },
            usetls: { value: false },
            verifyservercert: { value: false },
            compatmode: { value: true },
            keepalive: { value: 60, validate: RED.validators.number() },
            cleansession: { value: true },
            willTopic: { value: "" },
            willQos: { value: "0" },
            willRetain: { value: false },
            willPayload: { value: "" },
            birthTopic: { value: "" },
            birthQos: { value: "0" },
            birthRetain: { value: false },
            birthPayload: { value: "" },
            persistout: { value: true },
            persistin: { value: false },
            compactinterval: { value: 30, validate: RED.validators.number() }
        },
        credentials: {
            user: { type: "text" },
            password: { type: "password" }
        },
        label: function () {
            var lab = this.name;
            if ((lab === undefined) || (lab === "")) {
                var b = this.broker;
                if (b === "") { b = "undefined"; }
                lab = (this.clientid ? this.clientid + "@" : "") + b + ":" + this.port;
            }
            return lab;
        },
        oneditprepare: function () {
            var tabs = RED.tabs.create({
                id: "node-config-mqtt-broker-tabs",
                onchange: function (tab) {
                    $("#node-config-mqtt-broker-tabs-content").children().hide();
                    $("#" + tab.id).show();
                }
            });
            tabs.addTab({
                id: "mqtt-broker-tab-connection",
                label: this._("hollicube.tabs-label.connection")
            });
            tabs.addTab({
                id: "mqtt-broker-tab-security",
                label: this._("hollicube.tabs-label.security")
            });
            tabs.addTab({
                id: "mqtt-broker-tab-birth",
                label: this._("hollicube.tabs-label.birth")
            });
            tabs.addTab({
                id: "mqtt-broker-tab-will",
                label: this._("hollicube.tabs-label.will")
            });
            setTimeout(function () { tabs.resize(); }, 0);
            if (typeof this.cleansession === 'undefined') {
                this.cleansession = true;
                $("#node-config-input-cleansession").prop("checked", true);
            }
            if (typeof this.usetls === 'undefined') {
                this.usetls = false;
                $("#node-config-input-usetls").prop("checked", false);
            }
            if (typeof this.compatmode === 'undefined') {
                this.compatmode = true;
                $("#node-config-input-compatmode").prop('checked', true);
            }
            if (typeof this.keepalive === 'undefined') {
                this.keepalive = 15;
                $("#node-config-input-keepalive").val(this.keepalive);
            }
            if (typeof this.willQos === 'undefined') {
                this.willQos = "0";
                $("#node-config-input-willQos").val("0");
            }
            if (typeof this.birthQos === 'undefined') {
                this.birthQos = "0";
                $("#node-config-input-birthQos").val("0");
            }

            function updateTLSOptions() {
                if ($("#node-config-input-usetls").is(':checked')) {
                    $("#node-config-row-tls").show();
                } else {
                    $("#node-config-row-tls").hide();
                }
            }
            updateTLSOptions();
            $("#node-config-input-usetls").on("click", function () {
                updateTLSOptions();
            });
            var node = this;
            function updateClientId() {
                if ($("#node-config-input-cleansession").is(":checked")) {
                    $("#node-config-input-clientid").attr("placeholder", node._("hollicube.placeholder.clientid"));
                } else {
                    $("#node-config-input-clientid").attr("placeholder", node._("hollicube.placeholder.clientid-nonclean"));
                }
                $("#node-config-input-clientid").change();
            }
            setTimeout(updateClientId, 0);
            $("#node-config-input-cleansession").on("click", function () {
                updateClientId();
            });
        },
        oneditsave: function () {
            if (!$("#node-config-input-usetls").is(':checked')) {
                $("#node-config-input-tls").val("");
            }
        }
    });
</script>